<template>
    <div class="show-json">
        <el-dialog :title="'json数据详情'" :visible.sync="dialogVisible">
            <ul class="text-box">
                <li v-for="(item,index) in json" :key="'pre'+index">
                    <pre class="pretext">
                        {{item}}
                    </pre>
                </li>
            </ul>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:"ShowJson",
    data(){
        return {
            dialogVisible:false,
            json:[]
        }
    },
    methods:{
        showText(data){
            this.dialogVisible = true;
            var jsondata = JSON.parse(data);
            if(jsondata instanceof Array){
                this.json = jsondata
            }else{
                this.json = [jsondata]
            }
        },
    }
}
</script>
<style lang="less">
.show-json{
    .el-dialog__body{
        padding-top: 0;
    }
    .text-box{
        max-height: 500px;
        overflow-y: auto;
        li{
            line-height: 2em;
        }
    }
    .pretext{
        padding: 5px; 
        text-align: left;
        background-color: #222222;
        color: #ffffff;
    }
}
</style>